<template>
  <div class="app-container">
      <h1>{{this.dname}}</h1><hr/>

      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
         <el-form-item label="酒店名称" prop="zkname">
            <el-input type="text" v-model="ruleForm.zkname" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item label="酒店编号" prop="zkcode">
            <el-input type="text" v-model="ruleForm.zkcode" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item label="api基础路径" prop="apiUrl">
            <el-input v-model="ruleForm.apiUrl"></el-input>
         </el-form-item>
          <el-form-item label="联系人姓名" prop="contactsName">
            <el-input v-model="ruleForm.contactsName"></el-input>
         </el-form-item>
          <el-form-item label="联系人手机" prop="contactsPhone">
            <el-input v-model.number="ruleForm.contactsPhone"></el-input>
         </el-form-item>

         <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
         </el-form-item>

      </el-form>

   </div>
</template>


<script>
import hotelset from './api/hotelset'

export default {
    data() {
      // 验证规则
      var validateName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入酒店名称'));
        } else {
          callback();
        }
      };

      var validateCode = (rule, value, callback) => {
         if (value === '') {
          callback(new Error('请输入酒店编号'));
        } else {
          callback();
        }
      };

      var validateApiUrl = (rule, value, callback) => {
         if (value === '') {
          callback(new Error('请输入Api路径'));
        } else {
          callback();
        }
      };

      var validateContactsName = (rule, value, callback) => {
         if (value === '') {
          callback(new Error('请输入联系人姓名'));
        } else {
          callback();
        }
      };

       var checkContactsPhone = (rule, value, callback) => {
         if (!value) {
            return callback(new Error('手机号不能为空'));
         }else{
           callback();
         }
      };

      return {
        hotelid:0,
        dname:'',
        ruleForm: {
          zkname: '',
          zkcode: '',
          apiUrl: '',
          contactsName: '',
          contactsPhone: '',
        },
        rules: {
          zkname: [
            { validator: validateName, trigger: 'blur' }
          ],
          zkcode: [
            { validator: validateCode, trigger: 'blur' }
          ],
          apiUrl: [
            { validator: validateApiUrl, trigger: 'blur' }
          ],
          contactsName: [
            { validator: validateContactsName, trigger: 'blur' }
          ],
          contactsPhone: [
            { validator: checkContactsPhone, trigger: 'blur' }
          ]
        }
      }
    },
    created() {
      this.hotelid=0;
      this.dname="酒店设置添加";
    },
   methods: {
      // 添加
      save(){
         hotelset.saveHotelSet(this.ruleForm)
            .then(response => {
               this.$message({
                  type: 'success',
                  message: '添加成功!'
               })
               this.$router.push({path:'/hotel-hotelset'})
            })
      },
       // 修改
      update(){
         hotelset.updateHotelSet(this.ruleForm)
            .then(response => {
               this.$message({
                  type: 'success',
                  message: '修改成功!'
               })
               this.$router.go(0);
               this.hotelid=0;
            })
      },
      // 判断添加还是修改
      saveOrUpdate() {
          if(this.hotelid == 0) { 
              this.save();
          } else {
              this.update();
          }
      },

      init(id){
          this.hotelid=id;
          this.getHotelSet(id);
           if(this.hotelid==0){
               this.dname="酒店设置添加";
            }else{
              this.dname="酒店设置修改";
            }
      },
      //根据id查询
      getHotelSet(id) {
         hotelset.getHotelSet(id)
          .then(({data}) =>{
                this.ruleForm.zkname=data.data.zkname;
                this.ruleForm.zkcode=data.data.zkcode;
                this.ruleForm.apiUrl=data.data.apiUrl;
                this.ruleForm.contactsName=data.data.contactsName;
                this.ruleForm.contactsPhone=data.data.contactsPhone;
                this.ruleForm.id=this.hotelid;
          })  
      },
      // 规则提交
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
          } else {
            alert('请输入合法的数据！');
            return false;
          }
        });
        this.saveOrUpdate();
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }

  }

}

</script>
